<template>
  <view class="content" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <HeaderBar :title="title" :style="{ paddingTop: safeAreaInsets?.top-30 + 'px',position:'fixed' }"/>
    <view class="main_view">
    <User/>
    <view class="funds_view" @click="()=>{go_to_Wallet()}">
      <img src="/src/icon/qianbao.png" class="icon" alt="">
      <text class="right_text">钱包（余额80元）</text>
    </view>
    <view class="middle_view">
      <view @click="()=>{go_to_introduction()}">
        <img src="/src/icon/book.png" class="icon" alt="">
        <text class="right_text">塔罗之书</text>
      </view>
      // #ifdef H5
      <hr>
      // #endif
      // #ifdef MP-WEIXIN
      <view class="hr"></view>
      // #endif
      <view @click="()=>{go_to_history()}">
        <img src="/src/icon/history.png" class="icon" alt="">
        <text class="right_text">提问记录</text>
      </view>
      // #ifdef H5
      <hr>
      // #endif
      // #ifdef MP-WEIXIN
      <view class="hr"></view>
      // #endif
      <view @click = "()=>{go_to_CardStyle()}">
        <img class="set_img" src="../../static/images/tarot_card.png" alt="">
        <text class="right_text">设置抽牌模式（大牌/小牌）</text>
      </view>
      // #ifdef H5
      <hr>
      // #endif
      // #ifdef MP-WEIXIN
      <view class="hr"></view>
      // #endif
      <view @click="()=>{go_to_BgImg()}">
        <img class="set_img" :src="select_img" alt=""> 
        <text class="right_text">设置背景图片</text>
      </view>
    </view>
    <view class="bottom_view">
      <view @click="()=>{go_to_Feedback()}">
        <img src="/src/icon/message.png" class="icon" alt="">
        <text class="right_text">意见反馈</text>
      </view>
      // #ifdef H5
      <hr>
      // #endif
      // #ifdef MP-WEIXIN
      <view class="hr"></view>
      // #endif
      <view @click="()=>{go_to_minAppIntroduce()}">
        <img src="/src/icon/about.png" class="icon" alt="">
        <text class="right_text">关于小程序</text>
      </view>
      // #ifdef H5
      <hr>
      // #endif
      // #ifdef MP-WEIXIN
      <view class="hr"></view>
      // #endif
      <view @click="()=>{go_to_MiniAppCode()}">
        <img class="set_img" src="/static/images/code.png" alt="">
        <text class="right_text">小程序码</text>
      </view>
    </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import HeaderBar from './components/HeaderBar.vue'
import User from './components/User.vue'
import { ref,reactive } from 'vue'

const { safeAreaInsets } = uni.getSystemInfoSync()
const title = "心灵塔塔"
const select_img = ref("/static/bg_img/tu1.webp")

const bg_img_list = reactive([
  "/static/bg_img/tu1.webp",
  "/static/bg_img/tu2.webp",
  "/static/bg_img/tu3.webp",
  "/static/bg_img/tu4.webp"
])

const go_to_introduction = () => {
  uni.navigateTo({url: `/pages/Introduction/Introduction`})
}
const go_to_history = () => {
  uni.navigateTo({url:"/pages/History/History"})
}
const go_to_Feedback = () => {
  uni.navigateTo({url:"/pages/Feedback/Feedback"})
}
const go_to_MiniAppCode = () => {
  uni.navigateTo({url:"/pages/MiniAppCode/MiniAppCode"})
}
const go_to_BgImg = () => {
  uni.navigateTo({url:"/pages/BgImg/BgImg"})
}
const go_to_minAppIntroduce = () => {
  uni.navigateTo({url:"/pages/minAppIntroduce/minAppIntroduce"})
}
const go_to_Wallet = () => {
  uni.navigateTo({url:"/pages/Wallet/Wallet"})
}
const go_to_CardStyle = () => {
  uni.navigateTo({url:"/pages/CardStyle/CardStyle"})
}
</script>

<style scoped>
.content {
  background-color: #1c1526;
  height: 100vh;
}

.main_view {
  padding: 20rpx;
  color: #333;
  padding-top: 9vh;
}

.funds_view {
  background-color: #51336c;
  padding: 20rpx;
  border-radius: 8rpx;
  margin: 20rpx 0;
  border: 1rpx solid #51336c;
  display: flex;
  align-items: center;
}

.iconfont {
  font-size: 24px;
  color: #eee;
}

.right_text {
  font-size: 16px;
  color: #eee;
  margin-left: 12px;
}

.middle_view,
.bottom_view {
  background-color: #51336c;
  padding: 0 20rpx;
  margin: 20rpx 0;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
}

.middle_view view,
.bottom_view view {
  padding: 24rpx 0;
  border-bottom: 1rpx solid #51336c;
}
.middle_view view{
  display: flex;
  align-items: center;
}
.bottom_view view{
  display: flex;
  align-items: center;
}
.set_img {
  width: 24px;
  height: 24px;
}

.hr {
  border-color: #eee;
}
.icon{
  width: 6vw;
  height: 6vw;
}
</style>
